<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="租户名称" prop="qymc">
        <el-input
          v-model="queryParams.qymc"
          placeholder="请输入租户名称"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-table v-loading="loading" :data="tableData" style="margin-top: 10px">
     
      <el-table-column
        prop="qymc"
        label="租户名称"
        align="center"
        width="300"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span
            style="color: #409eff; cursor: pointer"
            @click="openContactDialog(scope.row, 'invoice')"
          >
            {{ scope.row.qymc }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="yyzzh" label="租户信用代码" align="center" />
      <el-table-column prop="jflx" label="缴费类型" align="center" >
      <template #default="scope">
          <span v-if="scope.row.jflx == 1">后付费</span>
          <span v-else-if="scope.row.jflx == 2">预付费</span>
        </template>
      </el-table-column>
      <el-table-column prop="zt" label="载体项目" align="center" />
      <el-table-column prop="kpqymc" label="发票抬头" align="center"  width="300"
        show-overflow-tooltip />

      <el-table-column prop="xm" label="联系人" align="center" width="120">
        <template #default="scope">
          <span
            style="color: #409eff; cursor: pointer"
            @click="openContactDialog(scope.row, 'contact')"
          >
            {{ scope.row.xm || "无" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="kpsh" label="税号" align="center" />
      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <!-- <el-button link @click="openContactDialog(scope.row, 'invoice')">详情</el-button> -->
          <el-button link type="primary" @click="openCustomerDrawer(scope.row)">租户关联信息</el-button>
          <!-- 拉闸/合闸按钮 -->
    <el-button
      v-if="scope.row.dbSwitch === 1"
      link
      type="danger"
      @click="handleSwitchAmmeter(scope.row, 0)"
    >
      拉闸
    </el-button>
    <el-button
      v-else-if="scope.row.dbSwitch === 0"
      link
      type="success"
      @click="handleSwitchAmmeter(scope.row, 1)"
    >
      合闸
    </el-button>
        </template>
      </el-table-column>
    </el-table>
<pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 企业信息弹窗 -->
    <el-dialog
      :title="contactDialogQymc"
      v-model="contactDialogVisible"
      width="1200px"
      append-to-body
    >
      <!-- <div style="margin-bottom: 10px; font-weight: bold">
        客户编号：{{ contactDialogKhbh }}
      </div> -->
      <div style="position: absolute; right: 20px; top: 60px; z-index: 7">
        <el-button
          type="primary"
          @click="openInvoiceEditDialog"
          style="margin-bottom: 10px"
        >
          补充开票信息
        </el-button>
        <el-button
          type="primary"
          @click="openAddContactDialog"
          style="margin-bottom: 10px; margin-left: 10px"
        >
          添加企业成员
        </el-button>
      </div>
      <el-tabs v-model="contactTab">
        <el-tab-pane label="开票信息" name="invoice">
          <el-descriptions
            v-if="invoiceInfo"
            :column="2"
            border
            style="margin-bottom: 10px"
          >
            <el-descriptions-item label="租户名称" width="600px">{{
              invoiceInfo.qymc
            }}</el-descriptions-item>

            <el-descriptions-item label="统一信用代码" width="600px">
              {{ invoiceInfo.yyzzh }}</el-descriptions-item
            >
            <el-descriptions-item label="载体项目" width="600px">
              {{ invoiceInfo.zt }}</el-descriptions-item>
            <el-descriptions-item label="缴费类型" width="600px">
              <span v-if="invoiceInfo.jflx == 1">后付费</span>
              <span v-else-if="invoiceInfo.jflx == 2">预付费</span>
            </el-descriptions-item>
            <el-descriptions-item label="发票抬头企业名称" width="600px">
              {{ invoiceInfo.kpqymc }}</el-descriptions-item
            >
            <el-descriptions-item label="开票税号" width="600px">
              {{ invoiceInfo.kpsh }}</el-descriptions-item
            >
          </el-descriptions>
          <div v-else style="color: #999; padding: 40px 0; text-align: center">
            暂未补充
          </div>
        </el-tab-pane>
        <!-- 企业成员tab -->
        <el-tab-pane label="企业成员" name="contact">
          <el-table :data="contactList">
            <el-table-column prop="xm" label="姓名" align="center" />
            <el-table-column prop="sj" label="手机号" align="center" width="180" />
            <el-table-column prop="wxh" label="微信号" align="center" />
            <el-table-column prop="zw" label="职务" align="center" />
            <el-table-column prop="qx" label="权限" align="center" />
            <el-table-column prop="sfjf" label="缴费人" align="center">
              <template #default="scope">
                <span
                  :style="scope.row.sfjf === 0 ? 'color:#409eff;cursor:pointer;' : ''"
                  >{{ scope.row.sfjf === 0 ? "是" : "否" }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="yx" label="状态" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.yx == 1" type="success">启用</el-tag>
                <el-tag v-else-if="scope.row.yx == 2" type="warning">冻结</el-tag>
                <el-tag v-else-if="scope.row.yx == 0" type="info">已删除</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
              <template #default="scope">
                <el-button link @click="openEditContactDialog(scope.row)">编辑</el-button>
                <el-button
                  v-if="scope.row.yx == 2"
                  link
                  type="primary"
                  @click="handleContactStatus(scope.row, 1)"
                  >启用</el-button
                >
                <el-button
                  v-if="scope.row.yx == 1"
                  link
                  type="warning"
                  @click="handleContactStatus(scope.row, 2)"
                  >冻结</el-button
                >
                <el-button
                  v-if="scope.row.yx != 0"
                  link
                  type="danger"
                  @click="handleContactStatus(scope.row, 0)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 联系人新增/编辑对话框 -->
    <el-dialog
      :title="contactEditMode ? '编辑联系人' : '新增联系人'"
      v-model="contactEditDialogVisible"
      width="900px"
      append-to-body
    >
      <el-form
        :model="contactForm"
        :rules="contactRules"
        ref="contactFormRef"
        label-width="80px"
      >
        <el-form-item label="租户">
          <el-input v-model="contactForm.qymc" disabled />
        </el-form-item>
        <el-form-item label="客户编号">
          <el-input v-model="contactForm.khbh" disabled />
        </el-form-item>
        <el-form-item label="电表编号">
          <el-input v-model="contactForm.dbbh" disabled />
        </el-form-item>
        <el-form-item label="姓名" prop="xm">
          <el-input v-model="contactForm.xm" />
        </el-form-item>
        <el-form-item label="手机号" prop="sj">
          <el-input v-model="contactForm.sj" />
        </el-form-item>
        <el-form-item label="微信号" prop="wxh">
          <el-input v-model="contactForm.wxh" />
        </el-form-item>
        <el-form-item label="职务" prop="zw">
          <el-radio-group v-model="contactForm.zw">
            <el-radio label="法人">法人</el-radio>
            <el-radio label="总经理">总经理</el-radio>
            <el-radio label="主办会计">主办会计</el-radio>
            <el-radio label="普通员工">普通员工</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限" prop="qx">
          <el-radio-group v-model="contactForm.qx">
            <el-radio :label="6">管理员</el-radio>
            <el-radio :label="2">缴费人员</el-radio>
            <el-radio :label="1">查看</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="缴费人" prop="sfjf">
          <el-radio-group v-model="contactForm.sfjf">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="contactEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitContactForm">确定</el-button>
      </template>
    </el-dialog>
    <!-- 补充开票信息弹窗 -->
    <el-dialog
      title="补充开票信息"
      v-model="invoiceEditDialogVisible"
      width="750px"
      append-to-body
    >
      <el-form
        :model="invoiceForm"
        ref="invoiceFormRef"
        label-position="top"
        label-width="120px"
       
      >
        <el-form-item label="租户名称" prop="qymc">
          <el-input v-model="invoiceForm.qymc" placeholder="请输入租户名称" disabled />
        </el-form-item>

        <el-form-item label="统一信用代码" prop="yyzzh">
          <el-input v-model="invoiceForm.yyzzh" placeholder="请输入统一信用代码" />
        </el-form-item>
        <el-form-item label="载体项目" prop="zt">
          <el-input v-model="invoiceForm.zt" placeholder="请输入载体项目" />
        </el-form-item>
        <el-form-item label="缴费类型" prop="jflx">
          <el-radio-group v-model="invoiceForm.jflx">
            <el-radio :label="1">后付费</el-radio>
            <el-radio :label="2">预付费</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="发票抬头企业名称" prop="kpqymc">
          <el-input v-model="invoiceForm.kpqymc" placeholder="请输入发票抬头企业名称" />
        </el-form-item>
        <el-form-item label="开票税号" prop="kpsh">
          <el-input v-model="invoiceForm.kpsh" placeholder="请输入开票税号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="invoiceEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitInvoiceForm">确定</el-button>
      </template>
    </el-dialog>

    <!-- 租户关联信息抽屉 -->
    <el-drawer
      v-model="customerDrawerVisible"
      title="租户关联信息"
      size="60%"
      direction="rtl"
      class="custom-drawer"
    >
      <el-card class="box-card" style="margin-bottom: 24px;">
        <template #header>
          <div class="card-header">数据看板</div>
        </template>
        <el-descriptions :column="4" border>
          <el-descriptions-item label="房间总数">{{ customerBoard.fjhNum ?? '--' }}</el-descriptions-item>
          <el-descriptions-item label="电表总数">{{ customerBoard.ammeterNum ?? '--' }}</el-descriptions-item>
          <el-descriptions-item label="当月用电量">{{ customerBoard.monthPower ?? '--' }}</el-descriptions-item>
          <el-descriptions-item label="累计用电量">{{ customerBoard.totalPower ?? '--' }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="box-card" style="margin-bottom: 24px;">
        <template #header>
          <div class="card-header">关联电表列表</div>
        </template>
        <el-table :data="ammeterList" style="width: 100%">
          
          <el-table-column prop="fjh" label="房间号" align="center" />
          <el-table-column prop="dbbh" label="电表号" align="center" />
          <el-table-column prop="c" label="上期读数" align="center" />
          <el-table-column prop="b" label="最新读数" align="center" />
          <el-table-column prop="zzdl" label="抄见电量" align="center" />
          <el-table-column prop="e" label="真实电量" align="center" />
          <el-table-column prop="mount" label="电费" align="center" />
          <el-table-column prop="magnification" label="倍率" align="center" />
          <el-table-column prop="dbdj" label="单价" align="center" />
          <el-table-column prop="lc" label="楼层" align="center" />
          <el-table-column prop="location" label="电表地址" align="center" /> 
        </el-table>
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">用电量分析</div>
        </template>
        <el-tabs v-model="powerTab" style="margin-bottom: 0;">
          <el-tab-pane label="月度" name="month">
            <div style="margin-bottom: 12px;">
              <el-date-picker
                v-model="powerMonth"
                type="month"
                value-format="YYYY-MM"
                placeholder="选择月份"
                style="width: 160px"
                @change="fetchMonthlyEnergy"
              />
            </div>
            <div style="height: 320px;">
              <v-chart :option="monthChartOption" autoresize />
            </div>
          </el-tab-pane>
          <el-tab-pane label="年度" name="year">
            <div style="margin-bottom: 12px;">
              <el-date-picker
                v-model="powerYear"
                type="year"
                value-format="YYYY"
                placeholder="选择年份"
                style="width: 160px"
                @change="fetchYearlyEnergy"
              />
            </div>
            <div style="height: 320px;">
              <v-chart :option="yearChartOption" autoresize />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import { selectContact, updateContact, addContact } from "@/api/carrier/ammeter";
import {
  selectzh,
  addInvoice,
  selectEnterpriseList,
  deleteContact,
} from "@/api/carrier/index";
import { getCustomerLinkInfo, linkCustomerToAmmeter, getCustomerMonthlyEnergy, getCustomerYearlyEnergy } from "@/api/carrier/khbh";
import { use } from "echarts/core";
import VChart from "vue-echarts";
import { LineChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
use([LineChart, TitleComponent, TooltipComponent, GridComponent, LegendComponent, CanvasRenderer]);

const { proxy } = getCurrentInstance();

// 查询参数
const queryParams = reactive({
  qymc: "",
  pageNum: 1,
  pageSize: 10,
});
const tableData = ref([]);
const total = ref(0);
const loading = ref(false);

const contactTab = ref("invoice"); // 默认tab
// 联系人弹窗相关数据
const contactDialogQymc = ref(""); // 弹窗上方租户
const contactDialogDbbh = ref(""); // 弹窗电表编号
const contactDialogKhbh = ref(""); // 弹窗客户编号
const contactDialogVisible = ref(false);
// 联系人表单
const contactForm = reactive({
  qymc: "",
  khbh: "",
  dbbh: "",
  xm: "",
  sj: "",
  wxh: "",
  zw: "",
  qx: "1",
  sfjf: 0,
  yhID: undefined, // 编辑时用
});

// 联系人表单校验规则
const contactRules = {
  xm: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  sj: [{ required: true, message: "请输入手机号", trigger: "blur" }],
  zw: [{ required: true, message: "请输入职务", trigger: "blur" }],
  qx: [{ required: true, message: "请选择权限", trigger: "change" }],
  sfjf: [{ required: true, message: "请选择是否为缴费人", trigger: "change" }],
};

// 监听权限变化，权限为1时自动设置为非缴费人
watch(
  () => contactForm.qx,
  (val) => {
    if (val === 1) {
      contactForm.sfjf = 1;
    }
  }
);
const contactFormRef = ref(); // 表单ref
// 打开联系人列表弹窗
function openContactDialog(row, type) {
  contactDialogQymc.value = row.qymc;
  contactDialogDbbh.value = row.dbbh;
  contactDialogKhbh.value = row.khbh;
  contactDialogVisible.value = true;
  // 默认tab

  contactTab.value = type;
  fetchContactList();
  fetchInvoiceInfo();
}

// 获取联系人列表
function fetchContactList() {
  selectContact({
    qymc: contactDialogQymc.value,
    dbbh: contactDialogDbbh.value,
    khbh: contactDialogKhbh.value,
  }).then((res) => {
    contactList.value = res.data || [];
  });
}

// 打开编辑联系人弹窗
function openEditContactDialog(row) {
  contactEditMode.value = true;
  Object.assign(contactForm, {
    qymc: contactDialogQymc.value,
    khbh: contactDialogKhbh.value,
    dbbh: contactDialogDbbh.value,
    xm: row.xm,
    sj: row.sj,
    wxh: row.wxh,
    zw: row.zw,
    qx: row.qx,
    sfjf: row.sfjf,
    yhID: row.yhID,
  });
  contactEditDialogVisible.value = true;
  nextTick(() => {
    contactTab.value = "contact";
  });
}

// 提交联系人表单
function submitContactForm() {
  contactFormRef.value.validate((valid) => {
    if (!valid) return;

    if (contactEditMode.value) {
      // 编辑
      updateContact({ ...contactForm, yhID: contactForm.yhID }).then(() => {
        proxy.$modal.msgSuccess("联系人更新成功");
        contactEditDialogVisible.value = false;
        fetchContactList();
      });
    } else {
      // 新增
      addContact({ ...contactForm }).then(() => {
        proxy.$modal.msgSuccess("联系人新增成功");
        contactEditDialogVisible.value = false;
        fetchContactList();
      });
    }
  });
}

const invoiceInfo = ref(null);
const invoiceEditDialogVisible = ref(false);
const invoiceForm = reactive({
  qymc: "",
  khbh: "",
  yyzzh: "",
  zt: "",
  jflx: "",
  hkzje: 0,
  yszje: 0,
  wszje: 0,
  kpqymc: "",
  kpsh: "",
  kplx: "",
  kkpje: 0,
  ykpje: 0,
  wkpje: 0,
  qyzt: "",
});
const invoiceFormRef = ref();
const contactEditMode = ref(false); // 是否编辑模式
const contactList = ref([]);
const contactEditDialogVisible = ref(false);
function openAddContactDialog() {
  contactEditMode.value = false;
  const isFirst = !contactList.value || contactList.value.length === 0;
  Object.assign(contactForm, {
    qymc: contactDialogQymc.value,
    khbh: contactDialogKhbh.value,
    dbbh: contactDialogDbbh.value,
    xm: "",
    sj: "",
    wxh: "",
    zw: "",
    qx: isFirst ? 6 : 1,
    sfjf: 0,
    yhID: undefined,
  });
  contactEditDialogVisible.value = true;
  nextTick(() => {
    contactTab.value = "contact";
  });
}
function fetchInvoiceInfo() {
  invoiceInfo.value = null;
  if (!contactDialogKhbh.value) return;
  selectzh({ khbh: contactDialogKhbh.value })
    .then((res) => {
      if (res.code === 200 && res.data) {
        invoiceInfo.value = res.data;
      } else {
        invoiceInfo.value = null;
      }
    })
    .catch(() => {
      invoiceInfo.value = null;
    });
}
function openInvoiceEditDialog() {
  // 编辑时带入已有数据
  if (invoiceInfo.value) {
    Object.assign(invoiceForm, invoiceInfo.value);
  } else {
    Object.assign(invoiceForm, {
      qymc: contactDialogQymc.value,
      khbh: contactDialogKhbh.value,
      yyzzh: "",
      zt: "",
      jflx: "",
      hkzje: 0,
      yszje: 0,
      wszje: 0,
      kpqymc: contactDialogQymc.value,
      kpsh: "",
      kplx: "",
      kkpje: 0,
      ykpje: 0,
      wkpje: 0,
      qyzt: "",
    });
  }
  invoiceEditDialogVisible.value = true;
}
function submitInvoiceForm() {
  invoiceFormRef.value.validate?.((valid) => {
    if (valid === false) return;
    addInvoice({ ...invoiceForm }).then((res) => {
      if (res.code === 200) {
        proxy.$modal.msgSuccess("补充开票信息成功");
        invoiceEditDialogVisible.value = false;
        fetchInvoiceInfo();
      } else {
        proxy.$modal.msgError(res.msg || "补充失败");
      }
    });
  });
}
// 启用/冻结/删除企业成员
function handleContactStatus(row, yx) {
  proxy.$modal
    .confirm(
      yx === 1
        ? "确定要启用该企业成员吗？"
        : yx === 2
        ? "确定要冻结该企业成员吗？"
        : "确定要删除该企业成员吗？"
    )
    .then(() => {
      deleteContact({ yx, yhID: row.yhID }).then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess(
            yx === 1 ? "启用成功" : yx === 2 ? "冻结成功" : "删除成功"
          );
          fetchContactList();
        } else {
          proxy.$modal.msgError(res.msg || "操作失败");
        }
      });
    });
}
// 查询租户列表
function getList() {
  loading.value = true;
  selectEnterpriseList(queryParams)
    .then((res) => {
      tableData.value = res.data?.list || [];
      total.value = res.data?.total || 0;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}

// 查询
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}

// 重置
function resetQuery() {
  queryParams.qymc = "";
  queryParams.pageNum = 1;
  getList();
}
// 在<script setup>中添加
function handleSwitchAmmeter(row, tNumber) {
  proxy.$modal.confirm(
    tNumber === 0 ? "确定要对该电表执行拉闸操作吗？" : "确定要对该电表执行合闸操作吗？"
  ).then(() => {
    switchAmmeter({ dbbh: row.dbbh, tNumber }).then(res => {
      if (res.code === 200) {
        proxy.$modal.msgSuccess(res.msg || "操作成功！");
        handleQuery();
      } else {
        proxy.$modal.msgError(res.msg || "操作失败！");
      }
    });
  });
}

// 租户关联信息抽屉
const customerDrawerVisible = ref(false);
const customerBoard = ref({});
const ammeterList = ref([]);
const customerKhbh = ref("");
const powerTab = ref("month");
const powerMonth = ref(getLastMonthStr());
const powerYear = ref(getThisYearStr());
const monthChartOption = ref({});
const yearChartOption = ref({});

// 打开抽屉
function openCustomerDrawer(row) {
  customerKhbh.value = row.khbh;
  customerDrawerVisible.value = true;
  fetchCustomerBoard();
  fetchAmmeterList();
  fetchMonthlyEnergy();
  fetchYearlyEnergy();
}

// 数据看板
function fetchCustomerBoard() {
  getCustomerLinkInfo({ khbh: customerKhbh.value }).then(res => {
    customerBoard.value = res.data || {};
  });
}
// 关联电表列表
function fetchAmmeterList() {
  linkCustomerToAmmeter({ khbh: customerKhbh.value }).then(res => {
    ammeterList.value = res.data || [];
  });
}

// 月度用电量
function fetchMonthlyEnergy() {
  if (!powerMonth.value) return;
  getCustomerMonthlyEnergy({ month: powerMonth.value, khbh: customerKhbh.value }).then(res => {
    const list = res.data || [];
    monthChartOption.value = {
      title: { text: "月度用电量趋势", left: "center" },
      tooltip: { trigger: "axis" },
      xAxis: { type: "category", data: list.map(i => i.date) },
      yAxis: { type: "value", name: "电表计数" },
      series: [
        {
          name: "电表计数",
          type: "line",
          data: list.map(i => i.dbjs),
          smooth: true,
          symbol: "circle",
        },
      ],
      grid: { left: 40, right: 20, top: 60, bottom: 40 }
    };
  });
}

// 年度用电量
function fetchYearlyEnergy() {
  if (!powerYear.value) return;
  getCustomerYearlyEnergy({ year: powerYear.value, khbh: customerKhbh.value }).then(res => {
    const list = res.data || [];
    yearChartOption.value = {
      title: { text: "年度用电量趋势", left: "center" },
      tooltip: { trigger: "axis" },
      xAxis: { type: "category", data: list.map(i => i.date) },
      yAxis: { type: "value", name: "电表计数" },
      series: [
        {
          name: "电表计数",
          type: "line",
          data: list.map(i => i.dbjs),
          smooth: true,
          symbol: "circle",
        },
      ],
      grid: { left: 40, right: 20, top: 60, bottom: 40 }
    };
  });
}
import { parseTime } from "@/utils/ruoyi";

function getLastMonthStr() {
  const d = new Date();
  d.setDate(1); // 设置为当月第一天
  d.setMonth(d.getMonth() - 1);

  console.log(parseTime(d, "{y}-{m}"),parseTime(d),d.getMonth());
  return parseTime(d, "{y}-{m}");
}
function getThisYearStr() {
  return String(new Date().getFullYear());
}
getList();
</script>

<style scoped>
.custom-drawer {
  :deep(.el-drawer__body) {
    background-color: #f4f6f8;
    padding: 20px;
  }
  .box-card {
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    overflow: hidden;
  }
  .card-header {
    font-size: 16px;
    font-weight: bold;
    color: #324157;
  }
}
</style>
